<template>
	<view class="o-hidden">
		<!-- TODO 注册，修改密码，忘记密码 -->
		<u-form class="form" ref="form" :model="form" :rules="rules" :error-type="['toast']">
			<u-form-item prop="phone">
				<u-image class="u-m-r-48" src="/static/images/phone.png" width="28" height="44" :fade="false"></u-image>
				<u-input v-model="form.phone" type="number" placeholder="请输入手机号" maxlength="11"></u-input>
			</u-form-item>
			<u-form-item prop="code">
				<u-image class="u-m-r-48" src="/static/images/verify.png" width="27" height="51" :fade="false"></u-image>
				<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
				<view slot="right">
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
					<u-button :plain="true" :loading="!isCodeClick" :custom-style="{color: '#FC6B5D',border: 0}" hover-class="none" :hair-line="false"
						@click="sendCode">{{codeText}}</u-button>
				</view>
			</u-form-item>
			<u-form-item prop="password">
				<u-image class="u-m-r-48" src="/static/images/lock_empty.png" width="31" height="39" :fade="false"></u-image>
				<u-input type="password" v-model="form.password" placeholder="请输入密码"></u-input>
			</u-form-item>
			<u-form-item prop="confirm_password">
				<u-image class="u-m-r-48" src="/static/images/lock_empty.png" width="31" height="39" :fade="false"></u-image>
				<u-input type="password" v-model="form.confirm_password" placeholder="再次输入密码"></u-input>
			</u-form-item>
		</u-form>
		<u-button :loading="!isClick" :custom-style="{backgroundColor: '#2FD6AC',color: '#ffffff', margin: '0 115rpx', marginTop: '96rpx', borderRadius: '10rpx'}"
			@click="register">注册</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isClick: true,
				isCodeClick: true,
				form: {
					phone: '',
					code: '',
					password: '',
					confirm_password: ''
				},
				rules: {
					phone: [
						{required: true, message: '手机号不能为空', trigger: ['blur']},
						{validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						}, message: '手机号不正确', trigger: ['blur']}
					],
					code: [
						{required: true, message: '验证码不能为空', trigger: ['blur', 'change']}
					],
					password: [
						{required: true, message: '密码不能为空', trigger: ['blur', 'change']}
					],
					confirm_password: [
						{required: true, message: '确认密码不能没空', trigger: ['blur', 'change']},
						{validator: (rule, value, callback) => {
							return value == this.form.password
						}, message: '俩次密码输入不一致', trigger: ['blur', 'change']}
					]
				},
				codeText: '',
			}
		},
		methods: {
			codeChange(text) {
				this.codeText = text
			},
			sendCode() {
				if (this.isCodeClick && this.$refs.uCode.canGetCode) {
					this.isCodeClick = false
					setTimeout(() => {
						this.isCodeClick = true
					}, 1500)
					this.$refs.uCode.start()
				}
			},
			register() {
				if (this.isClick) {
					this.isClick = false
					this.$refs.form.validate(valid => {
						this.isClick = true
						if (valid) {
							
						} else {
							
						}
					})
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
	.form {
		width: 582rpx;
		margin: 0 auto;
		margin-top: 200rpx;
	}
</style>
